/* flex line */
.flex-line{
  display: flex;
  &.col{
      flex-direction: column;
  }
  &.split{
      justify-content: space-between;
  }
  &.center{
      align-items: center;
  }
  &.justify{
      justify-content:center;
  }
  &.wrap{
      flex-wrap: wrap;
  }
  &.column{
      flex-direction: column;
  }
  &.end{
      justify-content: flex-end;
  }
}
.flex-1{
  flex: 1;
}
.flex-10{
  flex: 0 0 10%;
}
.flex-20{
  flex: 0 0 20%;
}
.flex-25{
  flex: 0 0 25%;
}
.flex-30{
  flex: 0 0 30%;
}
.flex-40{
  flex: 0 0 40%;
}
.flex-45{
  flex: 0 0 45%;
}
.flex-50{
  flex: 0 0 50%;
}
.flex-60{
  flex: 0 0 60%;
}
.flex-70{
flex: 0 0 70%;
}
.flex-80{
flex: 0 0 80%;
}
.flex-33{
  flex: 0 0 33.33%;
}
.flex-100{
  flex: 0 0 100%;
}
.w100{
  width: 100%;
}

/*单行省略号*/
.ellipsis_one{ text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
/*超过2行省略号*/
.ellipsis_two{ overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;}
/*超过3行省略号*/
.ellipsis_three{ overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;}


.mr-20{
  margin-right: 20px;
}
.mr-10{
  margin-right: 10px;
}
.ml-20{
  margin-left: 20px;
}
.ml-10{
  margin-left: 10px;
}
.ml-5{
  margin-left: 5px;
}
.mt-10{
  margin-top: 10px;
}
.pr-5{
  padding-right: 5px;
}  
.pt-10{
  padding-top: 10px;
}
.pt-20{
  padding-top: 20px;
}
.pt-30{
  padding-top: 30px;
}
.pt-5{
  padding-top: 5px;
}
.pl-10{
  padding-left: 10px;
}
.pl-20{
  padding-left: 20px;
}
.pr-20{
  padding-right: 20px;
}
.p-20{
  padding: 20px;
}
.mlr-20 {
  margin: 0 20px;
}
.mt-20{
  margin-top: 20px;
}